import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'HomePage.dart';
void main() {
  runApp(MaterialApp(
    title: '注册页面',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: Res(),
  ));
}

class Res extends StatefulWidget {
  @override
  ResPageState createState() => new ResPageState();
}

class ResPageState extends State<Res> {
  @override
  bool isButtonEnable = true;
  String buttonText = '请填写验证码';
  int count = 60; //验证码时间

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false,
            backgroundColor: Color.fromRGBO(51, 51, 51, 1),
            titleSpacing: 0.0,
            title: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                FlatButton(
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  child: Row(
                    children: [
                      Icon(
                        Icons.arrow_back_ios,
                        color: Colors.white,
                      ),
                      Text(
                        '返回',
                        style: TextStyle(color: Colors.white, fontSize: 16),
                      )
                    ],
                  ),
                  onPressed: () {

                  },
                ),
                Container(
                  child: Row(
                    children: [
                      Text(
                        '注册',
                        style: TextStyle(fontSize: 16),
                      ),
                      SizedBox(
                        width: 25,
                      )
                    ],
                  ),
                ),
                IconButton(icon: Icon(Icons.more_horiz), onPressed: () {
                    Navigator.pop(context);
                })
              ],
            )),
        body: Container(
          margin: EdgeInsets.only(top: 20),
          width: double.infinity,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              //请输入手机号

              Container(
                width: 300,
                child: Column(
                  children: <Widget>[
                    Container(
                      child: Row(
                        children: <Widget>[
                          Text('手机号：'),
                          Expanded(
                            child: TextFormField(
                              maxLength: 11,
                              style: TextStyle(color: Colors.blue),
                              cursorColor: Colors.black,
                              decoration: InputDecoration(
                                hintText: '请输入手机号',
                                hintStyle: TextStyle(
                                  fontSize: 14,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),

                    //验证码
                    Container(
                      padding: EdgeInsets.only(right: 10),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.baseline,
                        textBaseline: TextBaseline.ideographic,
                        children: <Widget>[
                          Text('验证码:'),
                          Expanded(
                            child: Padding(
                              padding:
                                  EdgeInsets.only(left: 15, right: 15, top: 15),
                              child: TextFormField(
                                maxLines: 1,
                                onSaved: (value) {},      //  验证验证码是否正确
                                textAlign: TextAlign.left,
                                decoration: InputDecoration(
                                  hintText: ('填写验证码'),
                                  hintStyle: TextStyle(
                                    color: Colors.grey,
                                    fontSize: 13,
                                  ),
                                  alignLabelWithHint: true,
                                  border: OutlineInputBorder(
                                      borderSide: BorderSide.none),
                                ),
                              ),
                            ),
                          ),

                          //验证码小框框

                          Container(
                            width: 120,
                            child: FlatButton(
                              disabledColor: Colors.grey.withOpacity(0.1),
                              disabledTextColor: Colors.white,
                              textColor: isButtonEnable
                                  ? Colors.white
                                  : Colors.black.withOpacity(0.2), //文本颜色
                              color: isButtonEnable
                                  ? Colors.grey.withOpacity(0.9)
                                  : Colors.grey.withOpacity(0.1), //按钮的颜色
                              onPressed: () {
                                setState(() {
                                  if (isButtonEnable) {
                                    //当按钮可点击时
                                    isButtonEnable = false; //按钮状态标记
                                    Timer time;
                                    time = new Timer.periodic(
                                        Duration(seconds: 1), (Timer timer) {
                                      count--;
                                      setState(() {
                                        if (count == 0) {
                                          timer.cancel(); //结束倒计时
                                          isButtonEnable = true; //可以再次点击
                                          count = 60; //重置时间为60s
                                          buttonText = '发送验证码'; //重置文本
                                        } else {
                                          buttonText = '($count)'; //更新秒数
                                        }
                                      });
                                    });
                                    return null; //返回null按钮禁止点击
                                  } else {
                                    //当按钮不可点击时
                                    return null; //返回null按钮禁止点击
                                  }
                                });
                              },
                              child: Text(
                                buttonText,
                                style: TextStyle(
                                  fontSize: 13,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),

              SizedBox(
                height: 30,
              ),
              //注册按钮



              Container(
                width: 250,
                child:
                RaisedButton(
                  child: Text(
                    "注册",
                    style: TextStyle(color: Colors.white),
                  ),

                  color: Colors.grey,
                  onPressed: () {
                    showDialog(
                        context: context,
                        child: Container()
                    );
                    Navigator.of(context).push(MaterialPageRoute(
                        builder: (BuildContext context){
                          return HomePage();
                        }
                    )
                    );
                  },
                ),
              ),





            ],
          ),
        ));
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  @override
  void didUpdateWidget(Res oldWidget) {
    // TODO: implement didUpdateWidget
    super.didUpdateWidget(oldWidget);
  }

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
  }
}
